<template>
  <div class="user-profile">
    <a-card :bordered="false" style="max-width: 680px; margin: 24px auto">
      <template #title>个人中心</template>

      <a-skeleton v-if="loading" />

      <a-descriptions
        v-else
        :column="1"
        bordered
        size="large"
        :label-style="{ width: '120px' }"
      >
        <a-descriptions-item label="用户 ID">
          {{ user.id }}
        </a-descriptions-item>

        <a-descriptions-item label="用户名">
          {{ user.userName ?? "—" }}
        </a-descriptions-item>

        <a-descriptions-item label="角色">
          <a-tag color="arcoblue">{{ user.userRole }}</a-tag>
        </a-descriptions-item>

        <a-descriptions-item label="个人简介">
          {{ user.userProfile ?? "暂无" }}
        </a-descriptions-item>

        <a-descriptions-item label="注册时间">
          {{ formatDate(user.createTime) }}
        </a-descriptions-item>

        <a-descriptions-item label="最近更新">
          {{ formatDate(user.updateTime) }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
import { getLoginUserUsingGet } from "@/api/userController";
import { useRouter } from "vue-router";
import { useLoginUserStore } from "@/store/userStore";

const router = useRouter();
const loginUserStore = useLoginUserStore();

const loading = ref(true);
const user = ref<any>({});

onMounted(async () => {
  try {
    const res = await getLoginUserUsingGet();
    if (res.data.code === 0 && res.data.data) {
      user.value = res.data.data;
      loginUserStore.loginUser = res.data.data;
    } else {
      router.push("/user/login");
    }
  } finally {
    loading.value = false;
  }
});

function formatDate(dateStr?: string) {
  return dateStr ? dayjs(dateStr).format("YYYY‑MM‑DD HH:mm") : "—";
}
</script>
